<template>
  <div class="header-components">
    <el-dropdown>
      <span class="el-dropdown-link">
        <img src="../assets/defaultAvatar.png" class="header-image" alt="" />
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="changePsw()">Change Password</el-dropdown-item>
          <el-dropdown-item @click="logoutHandle()">log out</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router'
export default {
  components: {
    ArrowDown,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      count: 0,
    });
    function logoutHandle(){
        localStorage.clear()
        router.push("/");
    }

    function changePsw(){
      
        router.push("/changePsw");
    }
    return {
      ...toRefs(state),
      logoutHandle,
      changePsw
    };
  },
};
</script>

<style lang="scss" scoped>
.header-components {
  box-sizing: border-box;
  padding: 2rem;
  display: flex;
  justify-content: flex-end;
  .el-dropdown-link{
    display: flex;
    align-items: center;
  }
  .header-image {
    height: 5vh;
  }
}
</style>